<template>
	<view class="content">
		<yzt-Header class="hd" :title="title"></yzt-Header>
		<view class="Main">
			<scroll-view class="scrollLeftView" scroll-y="true">
				<view class="item" 
				v-for="(item,index) in components" 
				:key="index" 
				@click="click(index)">
					<image class="img" 
					:class="JSON.stringify(item) === JSON.stringify(component) ? 'imgActive':'' " 
					:src="icon[index]"></image>
				</view>
			</scroll-view>
			<scroll-view class="scrollRightView" scroll-y="true">
				<component :is="component"></component>
			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref , markRaw } from "vue";
	import Image from '@/pages/Image/Image.vue';
	import Music from '@/pages/Music/Music.vue';
	const title = ref("好用工具盒子");
	const icon:string[] = ['../../static/Image.svg','../../static/Music.svg',];
	const components = [markRaw(Image),markRaw(Music)];
	const component = ref(components[0]);
	const click = (val:number)=>{
		component.value = components[val];
	}
</script>

<style scoped lang="scss">
	.content{
		height: $h;
		display: flex;
		flex-direction: column;
		.Main{
			height:100%;
			display: flex;
			box-sizing: content-box;
			.scrollLeftView{
				padding: $pdx;
				width:var(--wh);
				.img{
					height: $iconSize;
					width: $iconSize;
				}
				.imgActive{
					box-sizing: border-box;
					border: $bor $borColor solid;
				}
			}
			.scrollRightView{
				padding: $pdx;
				box-shadow: 0 0 5px #ddd;
			}
		}
	}
</style>